

<template>
    <div>
        <Header :title="title">
            <template #right>
                <van-icon name="arrow" size="20" color="#fff" @click="onClickRight"/>
            </template>
        </Header>
        <div>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                基本信息
            </van-divider>
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="创建人" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field readonly clickable name="calendar" :value="value" label="创建时间" placeholder="点击选择日期"
                    @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />
                <div style="margin: 16px;">
                    <van-divider :style="{ color: '#6199ff', borderColor: '#1989fa', padding: '0 16px' }">
                        收货单信息
                    </van-divider>
                    <van-field v-model="pageData.projectName" name="projectName" placeholder="选择项目" label="项目"
                        :rules="[{ message: '选择项目' }]">
                        <!-- #button 它是slot="button"的简写 -->
                        <template #button>
                            <van-button size="small" color="#6199ff" native-type='button' @click="projectShow = true"
                                type="primary">
                                选择项目</van-button>
                        </template>
                    </van-field>
                    <van-field v-model="pageData.materialName" name="materialName" placeholder="选择材料" label="材料"
                        :rules="[{ message: '选择材料' }]">
                        <!-- #button 它是slot="button"的简写 -->
                        <template #button>
                            <van-button size="small" color="#6199ff" native-type='button' @click="productShow = true"
                                type="primary">
                                选择材料</van-button>
                        </template>
                    </van-field>
                    <van-field v-model="pageData.materialWeight" name="materialWeight" placeholder="数量" label="数量"
                        :rules="[{ required: true, message: '数量' }]" />
                    <van-field v-model="pageData.materialUnit" name="materialUnit" label="单位" placeholder="单位"
                        :rules="[{ required: true, message: '单位' }]" />
                    <van-field v-model="pageData.price" name="price" label="价格" placeholder="价格"
                        :rules="[{ required: true, message: '价格' }]" />
                    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                        供应商信息
                    </van-divider>
                    <van-field v-model="pageData.supplierName" name="supplierName" label="供应商" placeholder="供应商"
                        :rules="[{ message: '供应商' }]">
                        <!-- #button 它是slot="button"的简写 -->
                        <template #button>
                            <van-button size="small" color="#6199ff" @click="supplierShow = true" native-type='button'
                                type="primary">
                                选择供应商</van-button>
                        </template>
                    </van-field>
                    <van-field v-model="pageData.supplierContact" name="supplierContact" label="联系人" placeholder="联系人"
                        :rules="[{ required: true, message: '联系人' }]" />
                    <van-field v-model="pageData.supplierPhone" name="supplierPhone" label="联系电话" placeholder="联系电话"
                        :rules="[{ required: true, message: '联系电话' }]" />
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>

            </van-form>
        </div>
        <div>

        </div>
    </div>

</template>
  
  <script>
import Header from '@/components/header.vue';
export default {
    data() {
        return {
            title: '新建收货单',
            rightText:'编辑修改',
            value: "",
            showCalendar: false,
            username: "",
            password: "",
            pattern: /\d{6}/,
            pageData: {
                nextId: "",
                createId: "",
                createName: "",
                createTime: "",
                projectId: "",
                projectName: "",
                materialId: "",
                materialName: "",
                materialUnit: "",
                materialWeight: "",
                price: "",
                supplierId: "",
                supplierName: "",
                supplierContact: "",
                supplierPhone: "",
                remark: ""
            }
        };
    },
    methods: {
        onConfirm(date) {
            this.value = `${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
        },
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join("/");
        },
        onSubmit(values) {
            console.log("submit", values);
        },
        onClickLeft() {
            this.$router.push("/stock");
        },
        onClickRight() {
            this.$router.push("/recevie/list");
        },
    },
    components: { Header }
}
</script>
  
  
  <style lang="less" scoped>
  .van-hairline--bottom {
      background-color: #6199ff;
  }
  
  .header/deep/ .van-nav-bar__arrow,
  .header/deep/ .van-nav-bar__text,
  .header/deep/ .van-nav-bar__title {
      color: #F2F2F2 !important;
      font-size: 20px;
  }
  </style>
  
    